<template>
  <div class="app-container">
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />
    <div class="filter-container">
      <span v-if="authorityHandle(76)" class="filter-title filter-item">身份所属</span>
      <k-select
        v-if="authorityHandle(76)"
        v-model="listQuery.userType"
        class="filter-item right-item width-control"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">消费方式</span>
      <k-select
        v-model="listQuery.payType"
        class="filter-item right-item width-control"
        :select-params="dict.type.CHARGE_TYPE"
        @handleSelectEvent="handlePayType"
      />
      <!-- <span class="filter-title filter-item">消费档位</span>
      <k-select
        v-model="listQuery.rechargeSettingType"
        class="filter-item right-item width-control"
        :custom-params="{ opations: rechargeList, label: 'lineName', value: 'lineId' }"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      /> -->
      <span class="filter-title filter-item">消费路径</span>
      <k-select
        v-model="listQuery.isMobile"
        class="filter-item right-item width-control"
        :select-params="[{ label: '空', value: -1 }, { label: '移动', value: 1 }, { label: 'PC', value: 2 }]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">消费状态</span>
      <k-select
        v-model="listQuery.payStatus"
        class="filter-item right-item width-control"
        :select-params="[{ label: '初始化', value: 1 }, { label: '成功', value: 2 }, { label: '失败', value: 3 }]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span v-if="authorityHandle(76)" class="filter-title filter-item">所属公司</span>
      <k-select
        v-if="authorityHandle(76)"
        v-model="listQuery.companyId"
        class="filter-item right-item width-control"
        :custom-params="{ opations: companyListData, label: 'lineName', value: 'lineId' }"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">创建时间</span>
      <k-date-picker v-model="timeValue" class="filter-item right-item" @hqchang="$refs.hqSearchDown.searchFun()" />
      <span class="filter-title filter-item">支付时间</span>
      <k-date-picker v-model="timeValueGet" class="filter-item" @hqchang="$refs.hqSearchDown.searchFun()" />
    </div>
    <div class="Player_Data">
      <!-- <k-button class="top-btn" value="余额记录" @click.native="ToBalance" /> -->
      <span v-if="authorityHandle(75)" class="btn" @click="setShowDialog">设置</span>
    </div>

    <!--表格相关 -->
    <el-table
      :data="listData"
      border
      :show-summary="!authorityHandle(439)"
      :summary-method="getSummaries"
      fit
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 20px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column width="80px" type="index" label="序号" align="center" />
      <el-table-column prop="userName" min-width="150px" label="用户名" align="center" show-overflow-tooltip />
      <!-- <el-table-column prop="amount" min-width="100px" label="消费挡位" align="center" show-overflow-tooltip /> -->
      <el-table-column prop="payAmount" min-width="100px" label="支付金额(R)" align="center" show-overflow-tooltip />
      <el-table-column prop="receiveAmount" min-width="100px" label="到账金额(F)" align="center" show-overflow-tooltip />
      <el-table-column prop="payTypeStr" min-width="120px" label="消费方式" align="center" show-overflow-tooltip />
      <el-table-column prop="isMobile" min-width="120px" label="消费路径" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="join-cell">{{ scope.row.isMobile == -1 ? '空' : scope.row.isMobile == 1 ? '移动' : 'PC' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="payStatusStr" min-width="120px" label="消费状态" align="center" show-overflow-tooltip />
      <!-- <el-table-column prop="payStatusStr" min-width="120px" label="消费总额" align="center" show-overflow-tooltip /> -->
      <el-table-column prop="companyName" min-width="150px" label="所属公司" align="center" show-overflow-tooltip />
      <el-table-column prop="createTime" min-width="120px" label="创建时间" align="center" show-overflow-tooltip />
      <el-table-column prop="payTime" min-width="120px" label="支付时间" align="center" show-overflow-tooltip />
      <el-table-column prop="outTradeNo" min-width="120px" label="交易单号" align="center" show-overflow-tooltip />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="$refs.hqSearchDown.searchFun(1)"
    />

    <!-- 设置弹窗 -->
    <k-dialog
      :show-hide.sync="setShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="设置"
      class="addBox-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveChargeSetting"
    >
      <div class="First_charge">
        <el-form label-width="auto">
          <el-form-item label="首充赠送：">
            <div class="first_div">
              <el-input v-model.number="chargeSetting.firstGive" placeholder="请输入首充赠送" /> %
            </div>
          </el-form-item>
          <el-form-item label="提取金额限制：">
            <el-input v-model.number="chargeSetting.draw" placeholder="请输入提取金额限制" />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { companyList } from '@/api/company/index.js'
import { getRechargeList, getRechargeSetting, setRechargeSetting, getlistData } from '@/api/data/data'
import hqSearchDown from "@/components/hqSearchDown"; // 下拉搜索

export default {
  dicts: ['CHARGE_TYPE', 'IDENTITY_TYPE'],
  components: { Pagination, hqSearchDown },
  data() {
    return {
      // 下拉搜索项0
      selectOpts: [
        // {
        //   label: '用户账号',
        //   rigth: true,
        //   value: 'mobile'
        // }, 
        {
          label: '交易单号',
          value: 'outTradeNo'
        },
         {
          label: '用户名',
          value: 'key'
        }
      ],
      // payTypeOpts: [
      //   { label: 'ada 微信', value: 5 },
      //   { label: 'ada 支付宝', value: 6 },
      //   { label: '微信', value: 1 },
      //   { label: '支付宝', value: 2 },
      //   { label: '第四方微信', value: 3 },
      //   { label: '第四方支付宝', value: 4 },
      //   { label: '天天畅付支付宝', value: 8 },
      //   { label: '曦月支付宝', value: 10 },
      //   { label: '慧支付', value: 100 },
      //   { label: '必诚支付', value: 101 },
      //   { label: '统统付支付宝', value: 102 },
      //   { label: '富信支付宝', value: 14 },
      //   { label: '富信微信', value: 13 },
      //   { label: '海至支付宝', value: 16 },
      //   { label: '海至微信', value: 15 },
      //   { label: '六一支付宝', value: 18 },
      //   { label: '六一支付宝附加', value: 20 }

      // ],
      companyListData: [],
      timeValue: '',
      timeValueGet: '',
      setShow: false,
      chargeSetting: { // 首充赠送
        firstGive: undefined,
        draw: undefined
      },
      listData: [],
      // 消费档位
      rechargeList: [],
      payAmount: 0,
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        companyId: '',
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        userType: undefined, // 身份所属",
        rechargeSettingType: undefined, // 消费挡位",
        amount: undefined, // 具体消费金额 不需要前端传递",
        payStatus: undefined, // 消费状态",
        payType: undefined, // 消费方式",
        createStartTime: '', // 最早创建时间",
        createEndTime: '', // 最终创建时间",
        payStartTime: '', // 最早支付时间",
        payEndTime: '', // 最终支付时间",
        key: '' // 饰品名称'
      }

    }
  },
  watch: {
    timeValue(val) {
      this.listQuery.createStartTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.createEndTime = this.timeValue ? this.timeValue[1] : null
    },
    timeValueGet(val) {
      this.listQuery.payStartTime = this.timeValueGet ? this.timeValueGet[0] : null
      this.listQuery.payEndTime = this.timeValueGet ? this.timeValueGet[1] : null
    }
  },
  created() {
    this.loadData()
    this.getCompanyList()
  },
  methods: {
    // getDict() {
    //   getTypeDictType('CHARGE_TYPE').then((res) => {
    //     if (res.data.success) this.payTypeOpts = res.data.data
    //   })
    // },
    getCompanyList() {
      companyList().then(res => {
        this.companyListData = res.data
      })
    },
    loadData(v) {
      const userMobile = this.$route.params.userMobile
      if (userMobile) {
        this.listQuery.key = userMobile
      }
      getlistData({ ...v, ...this.listQuery }).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
        this.payAmount =  data.totalData.payAmount
      })
    },
    setShowDialog() {
      this.setShow = true
      this.getRechargeSetting()
    },
    // 获取消费设置
    getRechargeSetting() {
      getRechargeSetting().then(res => {
        this.$log(res)
        this.chargeSetting = res.data
      })
    },
    // 保存设置
    saveChargeSetting() {
      this.$log(this.chargeSetting)
      setRechargeSetting(this.chargeSetting).then(res => {
        this.$message.success('保存成功')
        this.setShow = false
        // this.$resetForm(this.chargeSetting)
      })
    },
    getRechargeList(id) {
      this.listQuery.rechargeSettingType = ''
      getRechargeList({ id }).then(res => {
        this.rechargeList = res.data
      })
    },
    // 设置新增
    newly_added() {
      this.chargeSetting.settingList.push({
        id: undefined,
        rechargeAmount: undefined, // 消费挡位',
        givePercent: undefined // 消费赠送'
      })
    },
    // 设置删除
    Delete(value) {
      var index = this.chargeSetting.settingList.findIndex(function(item) {
        return item.id === value
      })
      if (index !== -1) {
        this.chargeSetting.settingList.splice(index, 1)
      }
    },

    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) { // 第一列
          sums[index] = '总计'
        } else if (column.property === 'payAmount') {
          sums[index] = this.payAmount
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    handlePayType(value) {
      this.$refs.hqSearchDown.searchFun()
      this.getRechargeList(value)
    },
    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) this.listQuery.pager.pageNo = 1
      this.$route.params.userMobile = undefined
      this.listQuery.key = v.key
      this.loadData(v)
    },
    // 余额管理
    ToBalance() {
      this.$router.push({ path: '/rootdatamanager/userbehavior-data/playerBalanceManage/balance' })
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText: #14162E; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.filter-container {
  width: 100%;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .width-control {
    width: 120px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }

  .right-item {
    margin-right: 10px;
  }

  ::v-deep .el-range-editor.el-input__inner {
    width: 250px;
  }
}

.addBox-dialog {
  ::v-deep .el-dialog__body {
    padding: 30px 80px;
  }
}

.Player_Data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;

  .btn {
    width: 100px;
    height: 35px;
    font-size: 14px;
    line-height: 35px;
    text-align: center;
    border-radius: 4px;
    background: #F8F7FB;
    cursor: pointer;
  }
}

.top-radio-group {
  margin-bottom: 20px;
}

::v-deep .el-radio-button__inner {
  &:hover {
    color: $mainColor;
  }
}

.First_charge {
  ::v-deep.el-input {
    width: 200px;
  }

  span {
    font-size: 14px;
  }
}

.set_box {
  width: 500px;
  padding: 0 20px;
  box-sizing: border-box;

  .Recharge_Data {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    color: #000;

    .Recharge_Data_box {
      width: 80%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .el-input {
        width: 100px;
        height: 35px;

        input {
          width: 100px;
          height: 35px;
        }
      }

      span {
        font-size: 14px;
      }
    }

    .operation {
      width: 12%;
      display: flex;
      justify-content: space-between;

      .el-icon {

        &-circle-plus,
        &-remove {
          font-size: 22px;
          color: #3b425d;
          margin-left: 10px;

        }
      }

      span {
        width: 20px;
        height: 20px;
        border: 1px solid #3b425d;
        border-radius: 50%;
        text-align: center;
        line-height: 14px;
        box-sizing: border-box;
        color: #3b425d;
        font-size: 18px;
        cursor: pointer;

        &:last-child {
          line-height: 18px;
          color: #fff;
          background: #3b425d;
        }
      }
    }
  }
}
</style>
